import React from 'react';
import { StyleSheet, View, Image, Text, TouchableOpacity } from 'react-native';

export default class CommunityCellButton extends React.Component {

    state = { 
        isHighlight: false,
        title: this.props.title
    }

    render() {
        const img = this.state.isHighlight ? this.props.highlightImg : this.props.normalImg
        const { style } = this.props
        const color = this.state.isHighlight ? '#d81e06' : '#999999'
        return (
            <TouchableOpacity onPress={this.clickAction.bind(this)}>
                <View style={[styles.container, style]}>
                    <Image source={img} style={styles.img} />
                    <Text style={[styles.title, {color:color}]}>{this.state.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    clickAction() {
        this.props.action()
        if (this.props.type == 'thumbup') {
            var num = Number(this.state.title)
            if (this.state.isHighlight) {
                num--
            } else {
                num++
            }
            // console.log("num = " + num)
            this.setState({
                isHighlight: !this.state.isHighlight,
                title: num
            })
        }
    }
}

const styles = StyleSheet.create({
    container: {
        padding:5,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    img: {
        width: 18,
        height: 18,
    },
    title: {
        marginLeft: 5,
        fontSize: 12,
    }
})